<template>
    <div class="header">
        <!-- 图标 -->
        <div class="homeIcon">
            <el-icon size="30px"
                @click="handleCollapse"
                :style="{ transform: isCollapse ? '' : 'rotate(180deg)' }" >
                <Expand />
            </el-icon>
            <span>首页</span>
        </div>
        <!-- 用户信息 -->
        <div class="user"
            @mouseenter="isShowUserInfo('show')" @mouseleave="isShowUserInfo('leave')">
            <img class="userImg"
                :src=" userInfo.headImg" alt="" />
            <div class="userInfo" v-if="show">
                <div>{{ userInfo.name }}</div>
                <div>退出</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,defineProps, reactive, onMounted } from 'vue';
import { getUserInfo } from '../api/index.js'
// 通过defineProps获取父组件传来的参数，并结构
const {isCollapse, handleCollapse} = defineProps(['isCollapse', 'handleCollapse'])
// 获取用户信息的响应式对象
const userInfo = reactive({
    name: '',
    headImg: ''
})
// 获取用户信息的方法
const getUserInfoData = async () => {
    const res = await getUserInfo()
    console.log(res)
    // 赋值给userInfo
    Object.assign(userInfo, {
        name: res.data.name,
        headImg: res.data.head_img
    })
    console.log(userInfo)
}
// 生命周期
onMounted(()=>{
    getUserInfoData()
})

/**
 * 鼠标移入移出事件
 */
const show = ref(false)
const isShowUserInfo = (type)=>{
    // 判断传来的值是否是show
    type === 'show' ? show.value = true : show.value = false
}

</script>

<style lang="less" scoped>
.header {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .homeIcon {
        display: flex;
        align-items: center;
        margin-left: 5px;
        
        span{
            margin-left: 5px;
            font-size: 16px;
        }
    }
    .user{
        width: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        .userImg{
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
        .userInfo{
            position: absolute;
            z-index: 999;
            width: 50px;
            height: 70px;
            display: flex;
            flex-direction: column;
            top: 52px;
            background-color: rgb(100, 200, 100);
            // 鼠标移入
            div:hover{
                color: rgb(200, 100, 100);
            }
            div{
                width: 100%;
                height: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
</style>